<template>
    <el-dialog
        custom-class="select-table-container"
        :title="title"
        :visible.sync="show"
        :close-on-click-modal="false"
        append-to-body
        @open="open"
        @closed="afterClose"
        center
        width="40%">
        <div class="options-box">
            <el-form :inline="true" :model="searchForm">
                <el-form-item label="">
                    <el-select v-model="searchForm.templateKind" style="width: 120px;">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="标准表单" :value="1"></el-option>
                        <el-option label="自定义表单" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="searchForm.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="toGetOptions">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table
                ref="multipleTable"
                :class="{isSingle: isSingle}"
                :data="optionsList"
                row-key="id"
                tooltip-effect="dark"
                max-height="300"
                border
                style="width: 100%"
                @selection-change="changeSelect"
                @select="changeSelectRow">
                <el-table-column
                    align="center"
                    type="selection"
                    :reserve-selection="true"
                    width="60">
                </el-table-column>
                <el-table-column
                    v-for="item in columnList"
                    :prop="item.prop"
                    :label="item.label"
                    :key="item.prop"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ item.customFilter ? getFilterValue(scope.row[item.prop], item.customFilter) : scope.row[item.prop] }}
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                class="pagination-tool"
                v-show="total > 0"
                :total="total"
                :page.sync="pageIndex"
                :limit.sync="pageSize"
                layout="prev, pager, next"
                @pagination="toGetOptions"/>
        </div>
        <div class="selected-box">
            <p class="box-title">已选</p>
            <badge-delete-box :list="selectedList" @deleteItem="deleteItem"/>
        </div>
        <div class="btn-box">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="save">保存</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import BadgeDeleteBox from "@/components/badge-delete-box/index.vue";

@Component({
    components: {
        BadgeDeleteBox
    }
})
export default class PersonSelection extends Vue {
    // 标题
    title = ""
    // 显示弹框
    show = false
    // 当前选中列表
    selectedList: any = []
    // 选项列表
    optionsList = []
    // 是否单选
    isSingle = false
    // 表头
    columnList = []
    total = 0
    pageIndex = 1
    pageSize = 10

    searchForm = {
        name: "",
        templateKind: ""
    }

    // 打开
    open() {
        this.show = true;
        this.toGetOptions();
    }

    // 获取选项内容
    toGetOptions() {
        this.$emit("getOptions", { pageIndex: this.pageIndex, pageSize: this.pageSize, name: this.searchForm.name, templateKind: this.searchForm.templateKind });
    }

    // 获取选项内容
    getOptions(data: any) {
        this.optionsList = data;
        this.$nextTick(() => {
            this.checkSelected();
        });
    }

    // 修改表格切换状态
    checkSelected() {
        const ids = this.selectedList.map((item: any) => item.id);
        const rows = this.optionsList.filter((item: any) => !ids.includes(item.id));
        const rowsTrue = this.optionsList.filter((item: any) => ids.includes(item.id));
        rows.forEach((row: any) => {
            (this.$refs.multipleTable as any).toggleRowSelection(row, false);
        });
        rowsTrue.forEach((row: any) => {
            (this.$refs.multipleTable as any).toggleRowSelection(row, true);
        });
    }

    // 选中变化(多选的)
    changeSelect(val: any) {
        if (this.isSingle) return false;
        this.selectedList = val;
    }

    // 选中变化(单选的)
    changeSelectRow(val: any, row: any) {
        if (!this.isSingle) return false;
        if (val.length === 1 || val.length === 0) {
            this.selectedList = val;
        } else if (val.includes(row)) {
            this.selectedList = [row];
            (this.$refs.multipleTable as any).clearSelection();
            (this.$refs.multipleTable as any).toggleRowSelection(row);
        }
    }

    // 删除选中
    deleteItem(data: any) {
        const row = this.optionsList.filter((item: any) => item.id === data.id);
        if (row.length) {
            (this.$refs.multipleTable as any).toggleRowSelection(row[0], false);
        }
        const rowIndex = this.selectedList.findIndex((item: any) => item.id === data.id);
        if (rowIndex !== -1) {
            this.selectedList.splice(rowIndex, 1);
        }
    }

    // 过滤
    getFilterValue(value: any, customFilter: any) {
        const res = customFilter.filter((item: any) => item.value === value);
        if (res.length) return res[0].label;
        return "";
    }

    // 取消
    close() {
        this.show = false;
    }

    // 保存
    save() {
        this.$emit("sure", {
            selectedList: this.selectedList
        });
        this.close();
    }

    // 关闭完成
    afterClose() {
        this.$nextTick(function() {
            this.$el.remove && this.$el.remove();
        });
        this.$emit("close");
    }
}
</script>

<style lang="scss" scoped>
/deep/.select-table-container {
    background: #fafafa;
    .isSingle {
        /deep/.el-table__header-wrapper {
            .el-checkbox {
                display: none;
            }
        }
    }
    .pagination-tool {
        padding: 20px 0;
        text-align: center;
    }
}
.options-box {
    border-radius: 4px;
    padding: 0 24px;
}
.selected-box {
    border-radius: 4px;
    padding: 0 24px 24px;
    margin-bottom: 24px;
    .box-title {
        font-size: 16px;
        line-height: 46px;
        margin: 0;
        color: #37383a;
        border-bottom: 1px solid #e4ebf1;
    }
}
.btn-box {
    text-align: right;
}
</style>
